<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<script type="text/javascript" src="../../../js/jquery.js"></script>
		<link rel="stylesheet" href="../../../bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="../../../css/muke.css">
		<link rel="stylesheet" href="../../../css/index.css">
		<link rel="stylesheet" href="../../../css/personal.css">
		<link rel="stylesheet" href="../../../js/elementui/index.css">
		<script type="text/javascript" src="../../../js/jquery.SuperSlide.2.1.1.js"></script>
		<script type="text/javascript" src="../../../js/vue.min.js"></script>
		<script type="text/javascript" src="../../../js/elementui/index.js"></script>
		<script type="text/javascript" src="../../../js/axios.min.js"></script>


	</head>

	<body class="backg_huibai">
	<!-- 顶部 -->
	<div id="app">

		<div class="width100 float_l height490 img_backg1" id="bt">
			<div class="width100 float_l height80 line_hei80">
				<!-- 顶部左边 -->
				<div class="float_l">
					<div class="float_l margin_l20">
						<a href="/student/index.html"> <img src="../../../img/uiz1.png"/></a>

					</div>
					<div class="float_l">
						<ul class="ul_li fon_siz16">
							<li><a class="color_black" href="/student/curricular/courses/index.html">课程</a></li>
							<li><a class="color_black" href="../../../department.html">院系</a></li>
							<li><a class="color_black" href="/student/curricular/paths/index.html">名师专栏</a></li>
						</ul>

					</div>
				</div>

				<!-- 顶部右边 -->
				<div class="float_r">
					<div class="float_l top_input">
						<input class="posi_relative" type="text" name="" id="" placeholder="请输入想搜索的内容...">
						<img src="../../../img/uiz4.png" height="16" width="18"/>
					</div>

					<div class="float_l margin_l20">
						<img src="../../../img/uiz5.png">
					</div>
					<div class="float_l margin_l35">
						<img src="../../../img/uiz6.png">
					</div>
					<div class="float_l margin_l30 margin_r40">
						<a class="color_black" href="course.html" v-show="isCenter">个人中心</a>&nbsp;&nbsp;
						<a class="btn btn-default navbar-btn sign-in" href="javascript:void(0)" @click="login()" v-show="isShow">登录</a>
						<el-dropdown>
							<div class="color_black" v-show="isCenter">
								<img :src="form.photo" width="45px">
								<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item @click.native="shezhi()">设置</el-dropdown-item>
								<el-dropdown-item @click.native="tuichu()">退出</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>

				</div>

			</div>
		</div>
		<!--中间-->
		<!-- 轮播图 -->
		<div class="width100 float_l margin_t-405 margin_b40">
			<div class="width_1200 margin_auto">
				<el-tabs type="border-card">
					<el-tab-pane style="width: 500px;height: 600px">
						<span slot="label"><i class="el-icon-date"></i>个人信息</span>
						<el-button icon="el-icon-refresh" type="primary" onclick=" window.location.reload();">刷新</el-button>

						<el-form ref="form" :model="form" label-width="80px">
							<el-form-item label="头像" >
								<el-upload class="avatar-uploader"
										action="/api/oss/upload"

										 :show-file-list="false"
										list-type="picture-card"
									    :data="personalData"
										:on-success="AvatarSuccess"
										:headers="authHead"
										:before-upload="beforeAvatarUpload">
									<i class="el-icon-plus"></i>
								</el-upload>
								<el-dialog :visible.sync="dialogVisible">
									<img width="100%" :src="dialogImageUrl" >
								</el-dialog>
							</el-form-item>
							<el-form-item label="用户名">
								<el-input disabled size="large" v-model="form.loginName"></el-input>
							</el-form-item>
                            <el-form-item label="学分">
                                <el-input disabled size="large" v-model="form.credits"></el-input>
                            </el-form-item>
							<el-form-item label="性别">
								<el-radio-group v-model="form.sex">
									<el-radio label="男" value="男"></el-radio>
									<el-radio label="女" value="女"></el-radio>
									<el-radio label="保密" value="保密"></el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="邮箱">
								<el-input type="text" v-model="form.protectEMail"></el-input>
							</el-form-item>
							<el-form-item label="电话">
								<el-input type="text" v-model="form.protectMTel"></el-input>
							</el-form-item>
							<el-form-item label="身份证">
								<el-input type="text" v-model="form.card"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="updateStu">保存</el-button>
							</el-form-item>

						</el-form>
					</el-tab-pane>
					<el-tab-pane label="修改密码">
						<el-form :model="upPsd" status-icon :rules="upPsdRule"  ref="upPsdForm" label-width="100px" class="demo-ruleForm">
						<el-form-item label="旧密码" prop="oldPass">
							<el-input type="password" v-model="upPsd.oldPass" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="新密码" prop="newPass">
							<el-input type="password" v-model="upPsd.pass" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="确认密码" prop="checkPass">
							<el-input type="password" v-model="upPsd.checkPass" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="submitPass" >提交</el-button>
							<el-button @click="resetForm" >重置</el-button>
						</el-form-item>
					</el-form>
					</el-tab-pane>
				</el-tabs>

			</div>
		</div>

		<!-- 页脚 -->
		<div class="width100 float_l padding_t30 height193">
			<div class="width_1200 margin_auto">
				<div class="width100 float_l text_c margin_b30">
					<a class="img_backg5" href="#"></a>
					<a class="img_backg6 posi_relative wexinmaxianshi" href="#"><i class="weixinweima dis_none"><img src="../../../img/idx-btm.png"></i></a>
					<a class="img_backg7" href="#"></a>
					<a class="img_backg8" href="#"></a>
				</div>
				<div class="width100 float_l text_c yejiao color_gray">
					<a>关于我们</a>
					<a>企业合作</a>
					<a>人才招聘</a>
					<a>讲师招募</a>
					<a>联系我们</a>
					<a>意见反馈</a>
					<a>友情链接</a>
				</div>
				<div class="width100 float_l text_c border_t margin_t20 padding_t20 color_gray fon_siz12">
					<span>© 2016 imoroc.com 京ICP备13042132号</span>
				</div>
			</div>
		</div>

	</div>
     <script>
         axios.defaults.headers.common['Authorization'] = "bearer " + sessionStorage.getItem("access_token");
         axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';

         var Main = {
             data() {
                 var validatePass = (rule, value, callback) => {
                     if (value === '') {
                         callback(new Error('请输入密码'));
                     } else {
                         if (this.upPsd.checkPass !== '') {
                             this.$refs.upPsdForm.validateField('checkPass');
                         }
                         callback();
                     }
                 };
                 var validatePass2 = (rule, value, callback) => {
                     if (value === '') {
                         callback(new Error('请再次输入密码'));
                     } else if (value !== this.upPsd.pass) {
                         callback(new Error('两次输入密码不一致!'));
                     } else {
                         callback();
                     }
                 };
                 return {
                     active: {},
                     //上传文件附加额外参数
                     personalData:{
                         path:''
                     },
                     //上传文件附加额外请求头参数
                     authHead:{
                         Authorization:"bearer " + sessionStorage.getItem("access_token")
                     },
                     upPsdRule:{
                         pass: [
                             { required: true, message: '请输入新密码', trigger: 'blur' },
                             { validator: validatePass, trigger: 'blur' }
                         ],
                         checkPass: [
                             { required: true, message: '请再次输入密码', trigger: 'blur' },
                             { validator: validatePass2, trigger: 'blur' }
                         ],
                         oldPass:[
                             { required: true, message: '请输入原密码', trigger: 'blur' }
                         ]
                     },
                     userId: '',
                     form: {},
                     dialogImageUrl: '',
                     dialogVisible: false,
                     isShow: true,
                     isCenter: false,
                     photo: '',
                     upPsd:{
                         show:false,
                         pass:'',
                         checkPass:'',
                         oldPass:''
                     },

				 }

			 },
             methods: {

                 updateStu(){
                     axios({
                         method:'put',
                         url:'/api/student/stu/updateStudent',
                         data:this.form
                     }).then(res=>{
                         res=res.data;
                         this.$message({
                             type:"success",
                             message:'修改成功',
                         })

                     })
                 },

                 //查询学生
                 queryStudent() {
                     axios({
                         method: 'get',
                         url: '/api/student/stu/QueryStudentByid',
                         params: {
                             sid: this.userId
                         }
                     }).then(res => {
                         let o=res.data.message[0];
                        // alert("as"+o.photo)
                         if(o.photo==null || o.photo==""){
                             o.photo='img/photo.jpg'
                         }
                         this.form=o;
                     })
                 },

                 submitPass(){
                     this.$refs['upPsdForm'].validate((valid) => {
                         if (valid) {
                             let params=new URLSearchParams();
                             params.append("oldPass",this.upPsd.oldPass);
                             params.append("password",this.upPsd.pass);
                             axios({
                                 method:'put',
                                 url:'/api/admin/user/updatePassword/'+this.userId,
                                 data:params
                             }).then(res=>{
                                 res=res.data;
                                 if(res.success){
                                     this.$message({
                                         type:'success',
                                         message:res.message
                                     })
                                     this.upPsd.show=false;
                                     top.location.href = "/login.html"
                                 }else{
                                     this.$message({
                                         type:'error',
                                         message:res.message
                                     })
                                 }
                             })
                         } else {
                             this.$message({
                                 type:'error',
                                 message:'请检查字段'
                             })
                             return false;
                         }
                     });
                 },
                 //重置密码
                 resetForm(){
                     this.$refs['upPsdForm'].resetFields();
                 },
                 //修改密码
                 changePassword(){
                     this.upPsd.show=true;
                 },
                 AvatarSuccess(response){
                     this.form.photo=response.message.path;
                    // this.dialogImageUrl = this.form.photo;
                   },
                 beforeAvatarUpload(file) {
                     const isJPG = file.type === 'image/jpeg';
                     const isLt2M = file.size / 1024 / 1024 < 2;

                     if (!isJPG) {
                         this.$message.error('上传头像图片只能是 JPG 格式!');
                     }
                     if (!isLt2M) {
                         this.$message.error('上传头像图片大小不能超过 2MB!');
                     }
                     this.personalData.path="stuHead/"+file.uid+file.name;


                     return isJPG && isLt2M;
                 },
                 onSubmit() {
                     console.log('submit!');
                 },
                 login: function() {
                     window.location.href = "http://127.0.0.1/login.html";
                 },
                 tuichu: function() {
                     sessionStorage.clear();
                     localStorage.clear();
                     window.location.href = "http://127.0.0.1/login.html";
                 },
                 shezhi:function(){
                     window.location.href = "http://localhost/student/curricular/user/13/personal.html";
                 },
			 },
             mounted() {
                 this.userId = sessionStorage.getItem("userid");
                 var roleNames = sessionStorage.getItem("roleNames");
                 console.log("测试"+roleNames);
                 if (roleNames != null && roleNames == ("学生")) {
                     console.log("roleNames"+roleNames);
                     this.isShow = false;
                     this.isCenter = true;
                     this.photo = sessionStorage.getItem("userPhoto");
                     var photo = sessionStorage.setItem("userPhoto",this.photo);
                     this.userid = sessionStorage.getItem("userid");
                 }else{
                     console.log("学生未登录");
                 }
               this.queryStudent();
             }

		 }
         var Component = Vue.extend(Main)
         new Component().$mount('#app')

	 </script>

	</body>
</html>
